Funciona así: tengo una tabla hecha en Vue, donde tengo algunas opciones de selección. Este error aparece cuando tengo un grupo y este grupo no esta asociado a una maquina, lo que no debe pasar, el objetivo es que solo aparezca "-". Lanza un error en la consola y no se muestra en mi DataTable.
El error: [/Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'id_area')
Esta es la parte de mi código que creo que está causando este error:
computed: { linhas () { return this.lista.map(row => { const group = this.grupos.find(g => g.id === row.id_grupo); const machine = this.maquinas.find(m => m.id === group.id_maquina); const area = this.areas.find(a => a.id === machine.id_area); return ({ href: {path: this.editRoute + row.id}, cols: [ row.id, row.tag, row.descricao, row.tipo === "ANALOGICA" ? "Analógica" : "Digital", group.nome, (machine || { nome: "-" }).nome, (area || { nome: "-" }).nome ] }); }); } },¿Alguien me puede ayudar? No entiendo por qué sucede esto.
El método array.find() devuelve undefined si no se encuentra el valor ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find ).
Entonces, si no hay "machina" con el id group.id_maquina recuperar de la línea anterior, la línea const machine = this.maquinas.find(m => m.id === group.id_maquina); establecer un valor undefined para la const de la machine .
Y aquí está su error: leer id_area de una machine que no está definida.
Entonces, debe verificar si sus variables no están definidas después de array.find()
//... const group = this.grupos.find(g => g.id === row.id_grupo); if (group) { const machine = this.maquinas.find(m => m.id === group.id_maquina); if (machine) { const area = this.areas.find(a => a.id === machine.id_area); } } //...